<template>
    <div class="info-wrapper">
        <a-tabs>
            <a-tab-pane key="1">
                <span slot="tab">
                   <a-icon type="user"/>
                     个人信息
                </span>
                <div  class="mycontainer">
                <div class="displaycontainer">
                    <img class="userimg" :src=" userpic.pic?'data:image/png;base64,'+userpic.pic:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'">

                    <div class="usernamesty">{{ userInfo.userName }}</div>
                    <div class="userdescript">{{"欢迎使用NJUSE订房系统"}}</div>
                    <div class="useriteminfo">
                        <a-icon class="itemicon" type="medium" />
                        <div class="itemdisplay"> {{ userInfo.email }}</div>
                    </div>
                    <div class="useriteminfo">
                        <a-icon class="itemicon" type="phone" />
                        <div class="itemdisplay">{{ userInfo.phoneNumber}}</div>
                    </div>
                    <div class="useriteminfo">
                        <a-icon class="itemicon" type="sketch" />
                        <div class="itemdisplay">{{ userInfo.credit }}</div>
                    </div>
                    <div style="padding-top: 50px">
                        <a-button type="link" @click="modifyuserimg" style="margin-left: 100px">
                            修改头像
                        </a-button>
                    </div>
                </div>
                <a-form :form="form" class="userinfofrom" style="margin-top: 30px">
                    <div class="infotitleswiper" >
                        <div>
                            <div class="userinfotitle">个人资料</div>
                            <div class="userinfodisc">使用本酒店预订系统的其他用户可能会看到部分信息</div>
                        </div>
                        <img style="margin-top: 20px" src="https://www.gstatic.com/identity/boq/accountsettingsmobile/privacycheckup_scene_316x112_3343d1d69c2d68a4bd3d28babd1f9e80.png">
                    </div>


                    <a-form-item >
                        <div class="itemlabel"  >用户名</div>
                        <a-input
                                placeholder="请填写用户名"
                                v-decorator="['userName', { rules: [{ required: true, message: '请输入用户名' }] }]"
                                v-if="modify"
                                class="info-input"

                        />
                        <span v-else class="infodisplayitem">{{ userInfo.userName }}</span>
                    </a-form-item>
                    <a-form-item  >
                        <div class="itemlabel">邮箱</div>
                        <span class="infodisplayitem" >{{ userInfo.email }}</span>
                    </a-form-item>
                    <a-form-item>
                        <div class="itemlabel"> 手机号</div>
                        <a-input
                                placeholder="请填写手机号"
                                v-decorator="['phoneNumber', { rules: [{ required: true, message: '请输入手机号' }] }]"
                                v-if="modify"
                                class="info-input"

                        />
                        <span v-else class="infodisplayitem">{{ userInfo.phoneNumber}}</span>
                    </a-form-item>
                    <a-form-item
                                 v-if="modify">
                        <div class="itemlabel"> 密码</div>
                        <a-input
                                placeholder="请输入新密码"
                                v-decorator="['password', { rules: [{ required: true, message: '请输入新密码' }] }]"
                                class="info-input"
                        />
                    </a-form-item>
                    <div class="creditsty" >
                        <div class="itemlabel"> 信用值</div>
                        <span class="infodisplayitem">{{ userInfo.credit }}</span>
                    </div>
                    <div  class="bottomsssty" v-if="modify">
                        <a-button type="primary" @click="saveModify" style="margin-left: 10px">
                            保存
                        </a-button>
                        <a-button type="default" style="margin-left: 130px" @click="cancelModify">
                            取消
                        </a-button>
                    </div>
                    <div class="bottomsssty" v-else>
                        <a-button type="link" @click="handleRegistere" >
                            注册会员
                        </a-button>
                        <a-button type="link" @click="modifyInfo" style="margin-left: 100px">
                            修改信息
                        </a-button>
                    </div>
                </a-form>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2">
                <span slot="tab">
                   <a-icon type="unordered-list"/>
                     我的订单
                </span>
                <a-table
                        size="middle"
                        :columns="columns"
                        :dataSource="userOrderList"

                >
                    <span slot="price" slot-scope="text">
                        <span>￥{{ text }}</span>
                    </span>
                    <span slot="roomType" slot-scope="text">
                        <span v-if="text == 'BigBed'">大床房</span>
                        <span v-if="text == 'DoubleBed'">双床房</span>
                        <span v-if="text == 'Family'">家庭房</span>
                    </span>
                    <span slot="orderState" color="blue" slot-scope="text">
                        {{ text }}
                    </span>
                    <span slot="action" slot-scope="record">
                        <a-button v-if="record.orderState == '已退房'" type="primary" size="small"
                                  @click="commentHandler(record)">评论</a-button>
<!--                        <a-divider type="vertical" v-if="record.orderState == '已预订'" style="height: 0px"></a-divider>-->
                        <a-popconfirm
                                title="你确定撤销该笔订单吗？"
                                @confirm="confirmCancelOrder(record.id)"
                                @cancel="cancelCancelOrder"
                                okText="确定"
                                cancelText="取消"
                                v-if="record.orderState == '已预订'"

                        >
                            <a-button type="danger" size="small">撤销</a-button>
                        </a-popconfirm>
                    </span>
                </a-table>
            </a-tab-pane>
            <a-tab-pane key="3">
                <span slot="tab">
                    <a-icon type="line-chart"/>
                 信用记录
                </span>

                <a-table
                        :columns="creditColumns"
                        :data-source="creditInfo"
                        size="middle"
                >
                    <span slot="action" slot-scope="text">
                    <a-tag color="green" v-if="text=='OrderExec'">
                        订单已执行
                    </a-tag>
                    <a-tag color="red" v-if="text=='OrderErr'">
                        订单异常
                    </a-tag>
                    <a-tag color="gray" v-if="text=='OrderRetreat'">
                        订单已取消
                    </a-tag>
                    <a-tag color="lightgreen" v-if="text=='AddFrc'">
                        信用充值
                    </a-tag>
                    </span>
                </a-table>
            </a-tab-pane>

            <a-tab-pane tab="信用充值" key="4" v-if="userInfo.userType=='Admin'">
                <div>
                    <br><br>
                    <a-form :form="form" @submit="handleOk" :label-col="{ span: 8 }" :wrapper-col="{ span: 8 }">
                        <a-form-item label="客户ID：">
                            <a-input
                                    v-decorator="[ 'id',
                                { rules: [{required: true, message: '请输入客户ID', }] }]">
                            </a-input>
                        </a-form-item>
                        <a-form-item label="充值金额：">
                            <a-input
                                    :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                    v-decorator="[ 'money',
                                { rules: [{required: true, message: '请输入金额', }] }]">
                            </a-input>
                        </a-form-item>
                        <a-form-item :wrapper-col="{ span: 1, offset: 11 }">
                            <a-button type="primary" html-type="submit">
                                Submit
                            </a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </a-tab-pane>
        </a-tabs>
        <registered-member :registeredMemberVisible="registeredMemberVisible"></registered-member>
        <user-comment :selectedOrder="selectedOrder"></user-comment>
        <adduserimg></adduserimg>
    </div>
</template>
<script>
    import {mapGetters, mapMutations, mapActions} from 'vuex'
    import registeredMember from "./registeredMember";
    import userComment from "./userComment";
    import adduserimg from "./adduserimg";

    const columns = [
        {
            title: '订单号',
            dataIndex: 'id',
        },
        {
            title: '酒店名',
            dataIndex: 'hotelName',
        },
        {
            title: '房型',
            dataIndex: 'roomType',
            scopedSlots: {customRender: 'roomType'}
        },
        {
            title: '入住时间',
            dataIndex: 'checkInDate',
            scopedSlots: {customRender: 'checkInDate'}
        },
        {
            title: '离店时间',
            dataIndex: 'checkOutDate',
            scopedSlots: {customRender: 'checkOutDate'}
        },
        {
            title: '入住人数',
            dataIndex: 'peopleNum',
        },
        {
            title: '房价（¥）',
            dataIndex: 'price',
        },
        {
            title: '状态',
            filters: [{text: '已预订', value: '已预订'}, {text: '已取消', value: '已取消'}, {text: '已入住', value: '已入住'}],
            onFilter: (value, record) => record.orderState.includes(value),
            dataIndex: 'orderState',
            scopedSlots: {customRender: 'orderState'}
        },
        {
            title: '操作',
            key: 'action',
            scopedSlots: {customRender: 'action'},
        },

    ];

    const creditColumns = [
        {
            title: '时间',
            dataIndex: 'time',
        },
        {
            title: '订单号',
            dataIndex: 'orderId',
        },
        {
            title: '动作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'}
        },
        {
            title: '信用度变化',
            dataIndex: 'changeVal',
        },
        {
            title: '信用度结果',
            dataIndex: 'afterChange',
        },
    ];

    export default {
        name: 'info',
        data() {
            return {
                modify: false,
                formLayout: 'horizontal',
                pagination: {},
                columns,
                creditColumns,
                data: [],
                form: this.$form.createForm(this, {name: 'coordinated'}),
                selectedOrder: {},
            }
        },
        components: {
            registeredMember,
            userComment,
            adduserimg
        },
        computed: {
            ...mapGetters([
                'userId',
                'creditInfo',
                'userInfo',
                'userOrderList',
                'registeredMemberVisible',
                'userpic'
            ]),
            userbirthday: function () {
                //TODO 完善生日数据
                if (this.userInfo.birthday == '') {
                    return '尚未填写生日'
                } else {
                    return this.userInfo.birthday
                }
            }

        },
       mounted() {
             this.getUserInfo()
            this.getUserOrders()
          this.getCreditInfo()
          this.getuserpic(this.userId)

        },
        methods: {
            ...mapActions([
                'getUserInfo',
                'getUserOrders',
                'updateUserInfo',
                'cancelOrder',
                'investCredit',
                'getCreditInfo',
                'getuserpic'
            ]),
            modifyuserimg(){
                this.set_adduserimgVisible(true);
            },
            commentHandler(record) {
                this.selectedOrder = record;
                this.set_userCommentVisible(true);
            },
            // selectedBirthday(dates, dateStrings){
            //     console.log('From: ', dates[0], ', to: ', dates[1]);
            //     console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
            // },//获取到生日
            ...mapMutations([
                'set_registeredMemberVisible',
                'set_userCommentVisible',
                'set_adduserimgVisible'
            ]),
            handleOk() {
                const data = {
                    id: this.form.getFieldValue('id'),
                    investedMoney: this.form.getFieldValue('money')
                }
                this.investCredit(data)
            },
            saveModify() {
                this.form.validateFields((err, values) => {

                    if (!err) {
                        const data = {
                            userName: this.form.getFieldValue('userName'),
                            phoneNumber: this.form.getFieldValue('phoneNumber'),
                            password: this.form.getFieldValue('password')
                            //TODO 加上生日！！
                        }
                        console.log("发出了")
                        console.log(data)
                        this.updateUserInfo(data).then(() => {
                            this.modify = false
                        })
                    }
                });
            },
            modifyInfo() {
                setTimeout(() => {
                    this.form.setFieldsValue({
                        'userName': this.userInfo.userName,
                        'phoneNumber': this.userInfo.phoneNumber,
                    })
                }, 0)
                this.modify = true
            },
            handleRegistere() {
                this.set_registeredMemberVisible(true);
            },
            //改变注册会员页的显示
            cancelModify() {
                this.modify = false
            },
            confirmCancelOrder(orderId) {
                this.cancelOrder(orderId)
            },
            cancelCancelOrder() {

            }

        }
    }
</script>
<style scoped lang="less">
    .info-wrapper {
        padding: 50px 100px;
        .infotitleswiper{
            display: flex;
            flex-direction: row;
        }
        .chart {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px
        }
    }
</style>
<style lang="less" >
    .mycontainer{
        display: flex;
        flex-direction: row;
        .displaycontainer{
            display: flex;
            flex-direction: column;
            width: 300px;
        }
    }
    .userimg{
        margin-top: 60px;
        margin-bottom: 20px;
        width: 104px;
        height: 104px;
        margin-left: 100px;
        border-radius: 50%;
        /*margin-top: 20px;*/
        /*margin-left: 220px;*/
        /*margin-bottom: 20px;*/
    }
    .usernamesty{
        color: #492929;
        font-size: 20px;
        text-align:center;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .userdescript{
        color: #333333;
        font-size: 15px;
        text-align:center;
        margin-bottom: 20px;
    }
    .useriteminfo{
        display: flex;
        flex-direction: row;
        line-height: 40px;
        margin-left: 90px;
        .itemicon{
            line-height: 40px;
            padding-top: 2px;
            vertical-align: center;
        }
        .itemdisplay{
            line-height: 40px;
            vertical-align: center;
            margin-left: 10px;
        }
    }
    .userinfofrom {
        margin-left: 50px;
        border: 1px solid #d9d9d9;
        width: 700px;
        border-radius: 8px;
        .userinfotitle{
            color: #333333;
            font-size: 28px;
            margin-top: 20px;
            margin-left: 25px;
        }
        .userinfodisc{
            color: #999;
            font-size: 16px;
            margin-left: 25px;
            margin-bottom: 30px;
            margin-top: 5px;
        }

        .ant-form-item{
            margin-bottom: 10px;
        }
        .ant-form-item-children {
            padding-bottom: 13px;
            padding-top: 13px;
            border-bottom: 1px solid #d9d9d9;
            display: flex;
            flex-direction: row;
            margin-left: 30px;
            width: 668px;
        }
    }
    .myicon{
        position: absolute;
        left: 620px;
    }
    .itemlabel{
        width: 190px;
        color: #999;
    }
    .infodisplayitem{
        color: #333333;
        font-size: 18px;
    }
    .creditsty{
        padding-bottom: 13px;
        padding-top: 13px;
        display: flex;
        flex-direction: row;
        margin-left: 30px;
    }
    .bottomsssty{
        padding-bottom: 13px;
        padding-top: 13px;
        display: flex;
        flex-direction: row;
        margin-left: 5%;
    }
    .info-input {
        width: 400px;
    }
    .info-wrapper {
        /*width: 1400px;*/
        margin: 50px 50px 50px 50px;
        border: 1px solid #d9d9d9;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        .ant-tabs-bar {
            padding-left: 30px
        }
    }
</style>
<style lang="less">

</style>
